<template>
  <div class="deviceManage_list">
    <one-title title="设备保养管理" @refreshData="refresh">
      <div class="mes_btn">
        <el-tooltip
          effect="dark"
          :open-delay="openDelay"
          :content="maintainBtnStatus.content"
          :disabled="!maintainBtnStatus.status"
          popper-class="btn_tooltip"
          placement="bottom">
          <el-button
            v-btn-permission="'maintain'"
            type="success" @click="maintain" :class="{'is-disabled':maintainBtnStatus.status}">
            <i class="iconfont icon-btn_Save"></i>
            完成保养
          </el-button>
        </el-tooltip>
      </div>
    </one-title>
    <div class="fixed_top_56">
      <mes-search-comp
        v-if="canSearch"
        ref="mesSearch"
        @searchInfo="_info"
        :searchList="tableColConfig"
        :searchResult="searchResult">
      </mes-search-comp>
      <div class="table_container">
        <el-table
          ref="tableNode"
          border
          stripe
          tooltip-effect="dark"
          v-loading="isLoading"
          style="width: 100%"
          :data="listData.list"
          :max-height="tableMaxHeight"
          @sort-change="_sort"
          :row-class-name="({row}) => !selectData.some((item) => item.id === row.id) || 'line_selected'"
          @row-click="(row) => $refs.tableNode.toggleRowSelection(row)"
          @selection-change="handleSelectionChange"
          @filter-change="handleFilterChange">
          <el-table-column
            width="40"
            type="selection"
            align="center">
          </el-table-column>
          <mes-col-comp
            v-for="(column,index) in columnList"
            :key="index"
            :column="column">
          </mes-col-comp>
        </el-table>
      </div>
      <mes-pagination
        @updateData="init"
        :currentPage="listData.pageNo"
        :total="listData.count || 0"
        :pageSize="listData.pageSize">
      </mes-pagination>
    </div>
    <note-filling title="完成保养"
                  ref="noteFilling"
                  describe="选中的设备将被完成保养，是否继续？"
                  @success="_submit">
    </note-filling>
  </div>
</template>

<script>
import NoteFilling from './NoteFilling'
import {MaintainStatus} from '@/components/mesDict'
import tableColumn from './tableColumn'

export default {
  name: 'DeviceMaintain',
  components: {
    NoteFilling,
    MaintainStatus
  },
  data() {
    return {
      tableColConfig: tableColumn, //列配置
      selectData: [], // 选中的列表
      searchData: {}, //搜索的字段
      sortData: {}, // 排序
      searchResult: NaN, // 搜索结果数
      isLoading: false, // 加载状态
      canSearch: false // 搜索框下拉的值请求完成后设置为true
    }
  },
  computed: {
    // 获取列表数据
    listData() {
      return this.$store.state.deviceMaintain.listData
    },
    // 保养项目
    MaintainPorject() {
      let MaintainPorject = this.$store.state.dict.MaintainPorject.labels || []
      return this.addLabelAll(MaintainPorject)
    },
    // 人员列表
    staffList() {
      let staffList = this.$store.state.deviceMaintain.staffList.list || []
      let arr = staffList.map(item => {
        return {
          id: item.id,
          label: item.name
        }
      })
      return [{id: '', label: '全部'}, ...arr]
    },
    // 保养状态
    maintainStatus() {
      let storeType = this.$store.state.dict.maintainStatus.labels || []
      return this.addLabelAll(storeType)
    },
    // 列循环
    columnList() {
      return this.tableColConfig.filter(item => item.noForCol !== true && item.isShow !== false)
    },
    // 完成保养按钮
    maintainBtnStatus() {
      let status = false
      if (this.selectData.some(item => item.maintainStatusValue !== 'InProcessing')) {
        status = true
      }
      return {
        status: status,
        content: '请选择保养状态为“保养中”的数据'
      }
    },
  },
  mounted() {
    this.getStaff()
    this.init()
  },
  methods: {
    // 列筛选回调
    handleFilterChange(filters) {
      let filterParams = this.$filterParams(this.tableColConfig, filters)
      Object.assign(this.searchData, filterParams.search)
      this.sortData = filterParams.order // 排序对象
      this.$refs.tableNode.clearSort()
      this.init()
    },
    // 刷新方法
    refresh() {
      this.searchData = {}
      this.sortData = {}
      this.$refs.mesSearch.clean()
      this.$refs.tableNode.clearSort()
      this.$refs.tableNode.clearFilter()
      this.init()
    },
    // 初始化方法
    init(page) {
      let postData = {
        method: 'post',
        url: 'a/devicemaintain/deviceMaintain/list',
        data: {
          pageNo: page ? page.pageNo : 1,
          pageSize: page ? page.pageSize : this.listData.pageSize || 15,
          query: {}
        },
        module: 'deviceMaintain',
        state: 'listData'
      }
      if (Object.keys(this.searchData).length > 0) {
        postData.data.query = this.searchData
      }
      if (Object.keys(this.sortData).length > 0) {
        postData.data.sort = this.sortData
      }
      this.$store.dispatch('saveData', postData).then((res) => {
        if (Object.keys(this.searchData).length > 0) {
          this.searchResult = res.count
        } else {
          this.searchResult = NaN
        }
      }).finally(() => {
        this.isLoading = false
      })
    },
    // 获取人员列表
    getStaff() {
      this.$store.dispatch('saveData', {
        method: 'post',
        url: 'a/staff/staff/list',
        data: {
          pageNo: 1,
          pageSize: 9999,
          query: {
            columns: ['name']
          },
          sort: { name: 'asc' }
        },
        module: 'deviceMaintain',
        state: 'staffList'
      }).finally(() => {
        this.canSearch = true
      })
    },
    // 查询
    _info(data) {
      this.searchData = data
      this.init()
    },
    // 多选表格数据
    handleSelectionChange(val) {
      this.selectData = val
    },
    // 保养完成提交
    _submit(remarks) {
      this.$store.dispatch('saveData', {
        method: 'post',
        url: 'a/devicemaintain/deviceMaintain/finishMaintain',
        data: {
          list: this.selectData,
          remarks: remarks
        },
        noCommit: true,
      }).then(() => {
        this.tipMessage('success', '操作成功')
        this.$refs.noteFilling.dialogVisible = false
        this.init()
      })
    },
    // 保养
    maintain() {
      if (!this.selectData.length) {
        return this.tipMessage('error', '请选择设备后，再进行操作!')
      }
      if (this.maintainBtnStatus.status) return
      this.$refs.noteFilling.openDialog()
    },
    // 排序
    _sort(item) {
      this.sortData = this.$getSortOrder(item)
      this.init()
    },
    tipMessage(type, str) {
      this.$message({
        type: type,
        message: str,
        duration: 1500,
        center: true
      })
    }
  }
}
</script>

<style scoped>

</style>
